<template id="integral">
    <div>
        <div class="integral_top">
            <h3>评价赚积分</h3>
            <img src="../image/dayu.jpg" alt="" @click="getIntegral()">
        </div>
        <div class="integral_lun">
            <swiper :options="swiperOption" ref="mySwiper" id="integral_1">
                <!-- slides -->
                <swiper-slide class="swiper_1">
                    <div class="integral_1" v-on:click="down($event)" >服务评价</div>
                    <div class="integral_1_center">
                        <div class="integral_center1">
                            <p>整体服务   &nbsp
								<i v-bind:class="i === 1 ? 'icon iconfont icon-xing rank_orange' : ' icon iconfont icon-xing rank_gray' "  v-for="(i,index) in info.arr_1"  @click="down(index,1)" ></i>
							</p>
                            <p>包装服务   &nbsp
								<i v-bind:class="i === 1 ? 'icon iconfont icon-xing rank_orange' : ' icon iconfont icon-xing rank_gray' "  v-for="(i,index) in info.arr_2"  @click="down(index,2)" ></i>
							</p>
                            <p>物流服务   &nbsp
								<i v-bind:class="i === 1 ? 'icon iconfont icon-xing rank_orange' : ' icon iconfont icon-xing rank_gray' "  v-for="(i,index) in info.arr_3"  @click="down(index,3)" ></i>
							</p>
                        </div>
                    </div>
					<div class="nav1">
							<div class="integral_p">
								<textarea name="" id="" v-model="content"  cols="30" rows="10" placeholder="对配送员哥哥的服务不满意吗？吐槽让我改进，还能赚5积分啊" class="refundDetail_text">
								
								</textarea>
							</div>
							<div>
							
								<div>	<input type="checkbox" name="is_check" v-model="is_check" v-on:click="alocked(is_check)" value=""></div>
								<div class="tips">为您购买的所有商品设置以上评价</div>
							</div>
					</div>
                   
                   <div class="ping_lun"  @click="sendOrderBut()">发表评论</div>
                </swiper-slide>

				<swiper-slide class="swiper_1"  v-for="(item, index) in goods_items">
                    <div class="integral_1_m">{{item.title}}</div>
                    <div class="integral_1_center_m">
                        <div class="integral_center1_m">
                            <p>口感   &nbsp
								<i v-bind:class="i === 1 ? 'icon iconfont icon-xing rank_orange' : ' icon iconfont icon-xing rank_gray' "  v-for="(i,k) in item.taste_arr"  @click="down_goods(k,index,1)" ></i>
							</p>
                            <p>颜值   &nbsp
								<i v-bind:class="i === 1 ? 'icon iconfont icon-xing rank_orange' : ' icon iconfont icon-xing rank_gray' "  v-for="(i,k) in item.facade_arr"  @click="down_goods(k,index,2)" ></i>
							</p>
                        </div>
                    </div>
                    <p class="integral_p_m">
						<textarea name="" v-bind:id="'goods_'+item.id" cols="30" rows="10" v-model="item.content" placeholder="对配送员哥哥的服务不满意吗？吐槽让我改进，还能赚5积分啊"   class="refundDetail_text"></textarea>
                    </p>
					<div class="refundDetail_tu">
					<div class="f_k"> 
						<div v-for="(i,k) in item.images" class="d_fg"><img  v-bind:src="i"  alt="" ></div>
						<div class="img_r showimg">
							<img src="/dist/jia.jpg" alt="">
							<input type="file" class="files" @change="getFile($event,index)">
							<input type="hidden" value="back" v-model="source" >
						</div>
					</div>
					<p  v-show="shop && !item.images">请上传商品包装袋上的快递单图片及所有问题的商品图片。单张图片大小不能超过6M,最多上传5张</p>
					</div>
                    <div class="ping_lun_m"   @click="sendGoodsBut(item.id,index)" >发表评论</div>
                </swiper-slide>
 
				
				
                <!-- Optional controls -->
            </swiper>
            <div class="swiper-pagination"></div>

        </div>



    </div>
</template>
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper';
    export default {
        name:'integral',
        data() {
            return {
				info:'',
				mode:'get_orders',
				order_id:this.$route.query.order_id,
				one:0,
				two:0,
				three:0,
				goods_items:[],
				source:'comment',
				shop:true,
				content:'',
				is_check:false,
                swiperOption: {//以下配置不懂的，可以去swiper官网看api，链接http://www.swiper.com.cn/api/
                    // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，<br>　　　　　　　　假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                    notNextTick: true,
                    // swiper configs 所有的配置同swiper官方api配置

                    direction : 'horizontal',
                    grabCursor : true,
                    pagination : '.swiper-pagination',
                    paginationClickable :true,
                    mousewheelControl : true,
                    observeParents:true,
                    loop: true,
                },
                /* imgs:[
                     { imgUrl: require("../../assets/img/banner.png") },
                     { imgUrl: require("../../assets/img/banner.png") }
                 ]*/
            }
        },
	    mounted:function(){
			//初始化
			var page    = 1;
			var is_more = 0;
			//载入订单
			this.getItems('get_orders',this.order_id);
			//载入商品
			this.getItems('get_goods',this.order_id);
			

			
        },
        methods:{
			alocked: function (is_check) {
				this.is_check = !is_check;
			},
			sendOrderBut:function(){
				if(!this.order_id){
					alert('服务异常,请稍候刷新再试');return;
				}

				if( this.content.length == 0){
					alert('评价内容不能为空');return;
				}
				if( this.content.length >100){
					alert('评价内容不能超过100字');return;
				}

				var arr = [];
				arr['order_id'] = this.order_id;
				arr['one']      = this.one;
				arr['two']      = this.two;
				arr['three']    = this.three;
				arr['content']  = this.content;
				arr['is_check'] = this.is_check;

				console.log(arr);
				var mode = 'orders_comment';
				this.postData(mode,arr);

			},
			sendGoodsBut:function(goods_id,key){
				if(!this.order_id || !goods_id){
					alert('服务异常,请稍候刷新再试');return;
				}

				if( this.goods_items[key]['content'].length == 0){
					alert('评价内容不能为空');return;
				}
				if( this.goods_items[key]['content'].length >100){
					alert('评价内容不能超过100字');return;
				}

				var arr = [];
				arr['order_id'] = this.order_id;
				arr['goods_id'] = goods_id;
				arr['taste_rank']     = this.goods_items[key]['taste_rank'];
				arr['facade_rank']    = this.goods_items[key]['facade_rank'];
				arr['content']  = this.goods_items[key]['content'];
				arr['images']   = JSON.stringify( this.goods_items[key]['images']);

				console.log(arr);
				var mode = 'goods_comment';
				this.postData(mode,arr);
			},
			postData:function(mode,data){

                let url   = this.GLOBAL.BaseUrl+'/mobile/api/v1/Public.php?mode='+mode;
                let Data  = this.GLOBAL.dataParam(data);

                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){
                        alert('提交成功.');
                        if(data['is_check']){
                             this.$router.push('/center');
                        }
                    }else{
                        this.GLOBAL.center_error(this,temp);
                    }
                })
			},
			getItems:function(mode,order_id){
				if(!order_id || order_id == 0){
					alert('ID异常');
					window.history.go(-1);
				}

                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Public.php?mode='+mode+'&order_id='+order_id;
                let Data = this.GLOBAL.dataParam();

                this.$ajax.post(url,Data).then((res) => {
                    let temp = res.data;
                    if(temp.code == 200){

                        if(mode == 'get_orders'){
                            this.info   =   temp.data;
                            this.one    =   temp.data.all_rank;
                            this.two    =   temp.data.packing_rank;
                            this.three  =   temp.data.logistics_rank;
                            this.content =  temp.data.content;
                         }

                         if(mode == 'get_goods'){
                            this.goods_items = temp.data;
                         }

                    }else{
                        this.GLOBAL.center_error(this,temp);
                    }
                })

			},
            getIntegral:function(){
                window.history.go(-1);
            },
			arr_rand:function(key,num){
				let arr = [];
				for(var i=1;i<=num;i++){
					if(i <= key){
						arr.push(1);
					}else{ 
						arr.push(0);
					}
				}
				return arr;
			},
			down:function(key,mode){
				key ++;
				
				var num = 5;
				var arr = this.arr_rand(key,num);
				
				if(mode == 1){
					this.one   = key;	
					this.info.arr_1 = arr;	
				}
				if(mode == 2){
					this.two = key;	
					this.info.arr_2 = arr;
				}
				if(mode == 3){
					this.three = key;
					this.info.arr_3 = arr;					
				}
			},
			down_goods:function(key,mode,type){
				key ++;
				
				var num = 5;
				var arr = this.arr_rand(key,num);
				
				for(var i in this.goods_items){
					if(i == mode){
						if(type == 1){
							this.goods_items[i]['taste_arr'] = arr;
							this.goods_items[i]['taste_rank'] = key;
						}
						if(type == 2){
							this.goods_items[i]['facade_arr'] = arr;
							this.goods_items[i]['facade_rank'] = key;
						}
					}
				}
			},
			getFile(event,key) {
				let num  = this.goods_items[key]['images'].length;
				if(num > 3){
					alert('最多上传4张图片');return false;
				}
				
				this.file = event.target.files[0];
				let config = {
					headers: {'Content-Type': 'multipart/form-data',}
				}
							
                let form = {"image":this.file,"source":this.source}                
                let url  = this.GLOBAL.BaseUrl+'/mobile/api/v1/Public.php?mode=image';
                let Data = this.GLOBAL.formParam(form);

				this.$ajax.post(url, Data, config).then((res) => {
                    let temp = res.data;
					if(temp.code == 200){
						this.shop = false;
						
						//写入
						this.goods_items[key]['images'].push(temp.data);
					}else{
						this.GLOBAL.center_error(this,temp); 
					}       
				}).catch((err) => {
					console.log(err);
				})
			}
			
        }
    }
</script>
<style>
.nav1{background: #ffffff;}
.tips{
    font-size: 14px;
    color: #5f5151;
	}

.refundDetail_text{
    width: 5.2rem;
    height: 1.6rem;
    background: #f2f2f2;
    border: 0;
    outline: none;
    text-indent: 0.1rem;
    color: #757070;
    font-size: 0.21rem;
    position: relative;
    border-radius: 4px;
    margin: 4px 7px;
	}

.refundDetail_tu p{
    width: 4.2rem;
    color: #c8c8c8;
    font-size: 0.18rem;
    line-height: 0.28rem;
    position: absolute;
    left: 1.19rem;
    top: 0.7rem;
}
.refundDetail_tu img{
	width:1.11rem;
	height:1.09rem;
	margin-top:0.5rem;
	top:0.48rem;
}
 .showimg{
   position: relative;
     width:1.11rem;
     height: 1.09rem;
     display:block;
}
 .f_k{
     display:inline-block;
 }
 .img_r{
     position: relative;
     width:1.11rem;
     height: 1.09rem;
     display:inline-block;
 }
 .f_k .d_fg{
     display:inline-block;
     width:1.11rem;
     height: 1.09rem;

 }
.img_r .files {
    position: absolute;
    font-family: Arial;
    width:1.11rem;
    height: 1.09rem;
    cursor: pointer;
    background-color: #999999;
    opacity: 0;
    z-index: 3;
    left: 0;
    top: 0.6rem;
}	
.refundDetail_tu{
    background-color: #ffffff;
	height:1.98rem;
	width:100%;
	position:relative;
}
.integral_lun .rank_gray{
    color:#a7a6a5;
    margin:0 0.1rem;
	width: 15px;
    height: 15px;
}

.integral_lun .rank_orange{
    color:#fe7b01;
    margin:0 0.1rem;
	width: 15px;
    height: 15px;
}

    .integral_lun .ping_lun_m{
        width:5.42rem;
        height:0.7rem;
        color:#ffffff;
        background:#fe7b01;
        line-height:0.7rem;
        text-align:center;
        font-size:0.25rem;
        border-bottom-left-radius: 0.1rem;
        border-bottom-right-radius: 0.1rem;

    }
    .integral_lun .integral_p_m span{
        width:3.9rem;
        line-height:0.28rem;
        font-size:0.17rem;
        color:#dedede;
        display:block;
        margin-left:0.5rem;
    }
    .integral_lun .integral_p_m{
        width:5.42rem;
        background:#ffffff;
    }

    .integral_lun .integral_center1_m p{
        width:4.79rem;
        height:0.8rem;
        color:#000000;
        font-size:0.3rem;
        text-indent: 0.5rem;
        line-height:0.8rem;
    }
    .integral_lun .integral_center1_m{
        width:4.79rem;
        height:2.75rem;
        margin:0 0.3rem;
        padding-top:0.3rem;


    }
    .integral_lun .integral_1_center_m{
        width:5.42rem;
        height:2.05rem;
        background:#ffffff;
    }

    .integral_lun .integral_1_m{
        width:5.42rem;
        height:1.24rem;
        color:#ffffff;
        font-size:0.34rem;
        background:#b0d4ee;
        line-height:0.8rem;
        text-align:center;
        border-top-left-radius:0.1rem;
        border-top-right-radius:0.1rem;
    }
    #integral_1_m{
        position:absolute;
        width:5.42rem;
        height:8.1rem;
        top:0.5rem;
        left:0.5rem;
    }
    #integral_1_m .swiper_1{
        width:5.42rem;
        height:8.1rem;
    }
    #integral_1_m .swiper_12{
        width:5.42rem;
        height:8.1rem;
    }
    /*1111111111111111111*/
    .integral_lun{
        width:100%;
        height:9.52rem;
        background:#f5f4f2;
        position:relative;
    }
    /*，，，，，*/
    .integral_lun .swiper-pagination{
        position:absolute;
        bottom:0.2rem;
        left:2.9rem;
    }
    .integral_lun .swiper-pagination .swiper-pagination-bullet{
        margin:0 0.1rem;
    }
    .integral_lun .swiper-pagination  .swiper-pagination-bullet-active{
        background:#fe7b01;
    }
    .integral_lun .ping_lun{
      width:5.42rem;
        height:0.7rem;
        color:#ffffff;
        background:#fe7b01;
        line-height:0.7rem;
        text-align:center;
        font-size:0.25rem;
        border-bottom-left-radius: 0.1rem;
        border-bottom-right-radius: 0.1rem;

    }
    .integral_lun .integral_p span{
        width:3.9rem;
        line-height:0.28rem;
        font-size:0.17rem;
        color:#dedede;
        display:block;
        margin-left:0.5rem;
    }
    .integral_lun .integral_p{
        width:5.42rem;
        height:90px;
        background:#ffffff;
    }

    .integral_lun  .integral_center1 p{
        width:4.79rem;
        height:0.8rem;
        color:#000000;
        font-size:0.3rem;
        text-indent: 0.2rem;
        line-height:0.8rem;
    }
    .integral_lun .integral_center1{
        width:4.79rem;
        height:2.75rem;
        margin:0 0.3rem;
        padding-top:0.3rem;

    }
    .integral_lun .integral_1_center{
        width:5.42rem;
        height:3.05rem;
        background:#ffffff;
    }
    .integral_lun .integral_1{
        width:5.42rem;
        height:1.24rem;
        color:#ffffff;
        font-size:0.34rem;
        background:#b0d4ee;
        line-height:1.24rem;
        text-align:center;
        border-top-left-radius:0.1rem;
        border-top-right-radius:0.1rem;
    }
    #integral_1{
        position:absolute;
        width:5.42rem;
        height:8.1rem;
        top:0.5rem;
        left:0.5rem;
    }
    #integral_1 .swiper_1{
        width:5.42rem;
        height:8.1rem;
    }
    .integral_lun .integral_lun{
        width:100%;
        height:9.52rem;
        background:#f5f4f2;
        position:relative;
    }
    .integral_top h3{
        width:100%;
        height:0.79rem;
        line-height:0.79rem;
        text-align:center;
        color:#85a45a;
        font-size:0.28rem;
    }
    .integral_top img{
        display:block;
        position:absolute;
        height:0.37rem;
        width:0.31rem;
        left:0.27rem;
        top:0.25rem;
    }
    .integral_top{
        width:100%;
        height:0.79rem;
        border-bottom:1px solid #cfcecd;
        position:relative;
    }
</style>